<!DOCTYPE html>
<html>
<head>
    <title>自定义指令</title>  <!-- v-pre跳过vue渲染, 解析为静态内容, 直接展示 -->
     <script src="../js/vue.min.js"></script>  <!-- 用于在页面中引入vue.js,会阻塞页面的渲染, 还可以放在body的最下方, 不会阻塞页面的渲染. 但是js脚本还是会被阻塞 -->
</head>
<body>
    <!-- Your HTML code goes here -->
    <div id="root">
        <h2 >当前n: {{n}}</h2>
        <h2>放大后的值: <span v-big="n"></span></h2>  <!-- v-big是自定义指令, 用于放大n的值, 自定义函数名多个单词之间用 - 分隔 -->
        <button @click="n++">+1</button>
    </div>
</body>
<script>
    Vue.directive('big2', function(el, binding) { // 全局自定义指令, 用于放大n的值
        el.innerText = binding.value * 2
    })
    new Vue({
        el: "#root",
        data: {
            n:0
        },
        directives: {  // 指令中的this 都是 windos 不是vue实例.
            // big: function(el, binding) { // 如果方法名是多个单词, 则需要使用 'a-b-c' 这种形式
            //     el.innerText = binding.value * 2
            // }
            big(el, binding) {
                el.innerText = binding.value * 2
            }
        }
    })
</script>
</html>
